<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚类筛选</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 引用外部CSS文件 -->
    <link href="styles/clustering.css" rel="stylesheet">
</head>

<body>
    <!-- Floating background elements -->
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>

    <!-- Header navigation -->
    <nav class="header-nav">
        <div class="nav-container">
            <div class="logo">Y-Squeeze</div>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link">首页</a></li>
                <li><a href="attention.html" class="nav-link">注意力分析</a></li>
                <li><a href="compression.html" class="nav-link">内容压缩</a></li>
                <li><a href="generation.html" class="nav-link">样本生成</a></li>
                <li><a href="clustering.html" class="nav-link active">聚类筛选</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="main-layout">
            <!-- Main Content -->
            <main class="main-content">
                <div class="module-header">
                    <h1 class="module-title">
                        <i class="fas fa-project-diagram"></i>
                        聚类筛选
                    </h1>
                    <div class="model-selector-container">
                        <label for="modelSelect" style="font-weight: 500; color: #4b5563;">模型:</label>
                        <select id="modelSelect" class="model-select">
                        </select>
                        <div class="model-dropdown" id="modelDropdown">
                            <div class="model-current">
                                <i class="fas fa-robot"></i>
                                <span class="model-name">选择模型</span>
                                <i class="fas fa-chevron-down caret"></i>
                            </div>
                            <div class="model-menu">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Data Input Section -->
                <div class="data-input-section">
                    <div class="input-header">
                        <div class="input-title">
                            <i class="fas fa-database"></i>
                            目标数据输入
                            <button class="input-btn" onclick="loadExampleData()" style="margin-left: 0.5rem;">
                                <i class="fas fa-file-import"></i> 示例
                            </button>
                        </div>
                        <div class="clustering-params">
                            <div class="toggle-container">
                                <span class="toggle-text">是否开启注意力特征提取：</span>
                                <label class="toggle">
                                    <input type="checkbox" id="attentionExtraction" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                            <div class="filter-score">
                                <label class="param-label">过滤分数：</label>
                                <input type="number" id="filterScore" class="param-input" value="1500" min="0" max="3000" step="10">
                            </div>
                            <div class="input-actions">
                                <button class="input-btn" onclick="clearData()">
                                    <i class="fas fa-redo"></i> 重置
                                </button>
                                <button class="action-btn-primary" onclick="startClustering()">
                                    <i class="fas fa-project-diagram"></i> 聚类
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 添加格式提示区域 -->
                    <div class="format-hint-section">
                        <div class="format-hint">
                            <i class="fas fa-info-circle"></i>
                            <span><strong>输入格式要求：</strong>必须是有效的JSON数组格式</span>
                        </div>

                    </div>
                    
                    <div class="input-content">
                        <div class="input-validation-wrapper">
                            <textarea id="dataInput" class="data-textarea" placeholder="请输入JSON数组格式的字符串列表，例如：[&quot;文本1&quot;, &quot;文本2&quot;, &quot;文本3&quot;]"></textarea>
                            <div id="validationMessage" class="validation-message"></div>
                        </div>
                    </div>
                </div>

                <!-- Results Section -->
                <div class="results-section-single">
                    <div class="results-main">
                        <div class="results-header">
                            <div class="results-title">
                                <i class="fas fa-chart-scatter"></i>
                                聚类结果
                            </div>
                        </div>
                        <div class="results-content" id="resultsContent">
                            <div class="empty-state">
                                <i class="fas fa-project-diagram"></i>
                                <p>请输入数据并点击"聚类"按钮</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 引用外部JavaScript文件 -->
    <script src="scripts/config.js"></script>
    <script src="scripts/clustering.js"></script>
</body>

</html>
